<template>
  <div>
    <el-form :model="queryParams" style="margin: 10px 30px;" ref="queryForm" size="small" :inline="true"
      v-show="showSearch" label-width="68px">
      <el-form-item label="所属地区" prop="areaId">
        <el-select v-model="queryParams.areaId" placeholder="请选择所属地区" clearable>
          <el-option v-for="dict in areaList" :key="dict.id" :label="dict.areaName" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属市场" prop="marketAffiliationId">
        <el-select v-model="queryParams.marketAffiliationId" placeholder="请选择所属市场" clearable>
          <el-option v-for="dict in categoryList" :key="dict.id" :label="dict.affiliationName" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="市场分类" prop="marketType">
        <el-select v-model="queryParams.marketType" placeholder="请选择市场分类" clearable size="small">
          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.MARKET_TYPE)" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="检测时间" prop="checkDate">
        <el-date-picker v-model="queryParams.checkDate" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']" />
      </el-form-item>
      <el-form-item label="检测项目" prop="checkTypeId">
        <el-select v-model="queryParams.checkTypeId" placeholder="请选择检测项目" clearable>
          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.CHECK_TYPE)" :key="dict.value" :label="dict.label"
          :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-card style="width: 100%; height: 600px">
      <div id="echarts" style="width: 100%; height: 550px" />
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import * as AreaCategoryApi from '@/api/market/AreaCategory';
import * as AffiliationCategoryApi from '@/api/market/AffiliationCategory';
import * as StatisticApi from '@/api/market/statistic';
import resize from '@/views/dashboard/mixins/resize'
import { set } from 'nprogress';
export default {
  mixins: [resize],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      list: [],
      areaList: [],
      categoryList: [],
      xList: [],
      pass: [],
      noPass: [],
      queryParams: {
        areaId: null,
        marketType: null,
        checkDate: [],
        marketAffiliationId: null,
        startDate: null,
        endDate: null,
        checkTypeId: null,
      },
      myChart: null
    };
  },
  created() {
    this.getList();
    this.getDataList();
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("echarts"));
  },
  watch: {
    xList(val) {
      this.xList = val
      this.dataLoad();
    },
    pass(val) {
      this.pass = val
      this.dataLoad();
    },
    noPass(val) {
      this.noPass = val
      this.dataLoad();
    },
  },
  methods: {
    async getList() {
      const list = await AreaCategoryApi.getAreaCategoryList();
      this.areaList = list.data
      const categoryList = await AffiliationCategoryApi.getAffiliationCategorylist();
      this.categoryList = categoryList.data
    },
    getDataList() {
      this.xList = []
      this.pass = []
      this.noPass = []
      StatisticApi.passInfo(this.queryParams).then(re => {
        this.list = re
        this.list.forEach(item => {
          this.xList.push(item.checkDate)
          this.pass.push(item.pass)
          this.noPass.push(item.noPass)
        })
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getDataList();
      this.dataLoad();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.getDataList();
      this.dataLoad();
    },
    dataLoad() {
      console.log(this.xList)
      this.myChart.clear();
      this.myChart.setOption(
        {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['合格率', '不合格率']
          },
          title: {
            text: '合格率分析:比率(%)'
          },
          xAxis: {
            type: 'category',
            data: this.xList,
            axisLabel: {  
   interval:0,  
   rotate:40  
}  

          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'合格率',
              data: this.pass,
              type: 'bar',
              color: '#a90000'
            },
            {
              name:'不合格率',
              data: this.noPass,
              type: 'bar',
              color: '#606266'
            }
          ]
        }, true
      );
    }
  },
}
</script>